<template>

  <van-row style='position: relative;left:0;top:60px;'>
    <van-col span="6">
      <van-sidebar :style="{ height: domHeight }" class='sidebarSty' v-model="sidebarActiveVal" @change="onChangeFn">
        <van-sidebar-item v-for='n in sidebarItemObj.arr' :title="n.sidebarName" />
      </van-sidebar>
    </van-col>
    <van-col span="18">
      <div class='sideGoodsWrap' :style="{ height: domHeight }"></div>
    </van-col>
  </van-row>

  <!-- footer底部导航栏 -->
  <footerTabber />
</template>

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
  name: 'category',
  data() {
    return {
      msg: '分类页'
    }
  },
  components: {
    footerTabber
  },
  setup() {
    // 设置dom的滚动的高度
    let domHeight = ref(0)
    onMounted(() => {
      console.log(window.innerHeight)
      domHeight.value = (window.innerHeight - 120) + 'px';

      // 当页面大小变化的时候
      window.addEventListener('resize', function () {
        console.log(window.innerHeight)
        domHeight.value = (window.innerHeight - 120) + 'px';
      });
    });

    // 侧边导航栏，索引
    let sidebarActiveVal = ref(0)

    // 侧边栏，切换事件
    const onChangeFn = (inx) => {
      // console.log( inx )
    }

    // 侧边栏的axios
    let sidebarItemObj = reactive({ arr: [] })
    requestFn({
      url: '/sidebarItemName',
      method: 'get'
    })
      .then(_d => {
        // console.log( _d.data )
        sidebarItemObj.arr = _d.data;
      });

    return {
      sidebarActiveVal,
      onChangeFn,
      sidebarItemObj,
      domHeight
    }
  }
}
</script>

<style>
.headWrap {
  height: 58px;
  width: 100%;
  /*position: relative;*/
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background: #fff;
}

.searchBtn {
  width: 255px;
  height: 40px;
  background: #eee;
  border-radius: 20px;
  position: absolute;
  left: 15px;
  top: 10px;
}

.searchBtn .icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 10px;
  top: 13px;
}

.searchBtn p.pIcon {
  position: absolute;
  top: 9px;
  left: 30px;
  font-size: 16px;
}

img.member {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 17px;
  right: 56px;
}

.accountSvg {
  position: absolute;
  top: 17px;
  right: 13px;
}

/* 每个栏目，对应的商品 */
.sideGoodsWrap {
  background: #f00;
  width: 100%;
  overflow-y: scroll;
}

/* 侧边导航、对应商品的容器 */
.sideWrap {
  padding-left: 90px;
  height: 400px;
  background: #666;
  position: relative;
}

/* 侧边导航栏，sidebar */
.sidebarSty {
  position: absolute;
  top: 0;
  left: 0;
}
</style>